<template>
	<div class="label">
		<van-nav-bar
			:title="num === 1 ? '添加标签' : '移除标签'"
			left-arrow
			@click-left="
				() => {
					$router.replace('/detail');
				}
			"
		/>
		<Header></Header>
		<div class="title" style="margin-top: 20px;">
			<div class="title-left">
				<span class="bg"></span>
				<span>客户标签</span>
			</div>
		</div>
		<template v-if="num === '1'">
			<van-cell v-for="(item, index) in labelTree" :key="index" class="tagList" :title="item.name">
				<template #default>
					<van-tag
						v-for="(val, key) in item.group"
						:data-id="val.id"
						:key="key"
						@click="handleLabel"
						size="large"
						class="active my-label"
						style="margin: 0 10px 10px 0;"
						color="#6881ec"
					>
						{{ val.name }}
					</van-tag>
				</template>
			</van-cell>
		</template>
		<template v-else-if="num === '2'">
			<van-cell class="tagList" title="当前标签">
				<template #default>
					<van-tag
						v-for="(val, key) in labelTree"
						:data-id="val.id"
						:key="key"
						@click="handleLabel"
						size="large"
						class="active my-label"
						style="margin: 0 10px 10px 0;"
						color="#6881ec"
					>
						{{ val.name }}
					</van-tag>
				</template>
			</van-cell>
		</template>
		<div class="footer-btn">
			<van-button v-show="!loading" color="#6881ec" @click="handleEdit()" block>保存</van-button>
			<van-button v-show="loading" color="#6881ec" loading loading-text="保存中..." style="cursor: default;" block></van-button>
		</div>
		<van-overlay :show="loading" :z-index="2000" />
	</div>
</template>

<script>
import { Divider, Tag, Cell, Button, Toast, Overlay,NavBar } from 'vant';
import { getTagTree, fetchTagging } from '../../api/detail.js';
import Header from './components/Header.vue';
export default {
	components: {
		[Divider.name]: Divider,
		[Cell.name]: Cell,
		[Tag.name]: Tag,
		[Button.name]: Button,
		[Toast.name]: Toast,
		[Overlay.name]: Overlay,
		[NavBar.name]:NavBar,
		Header
	},
	data() {
		return {
			labelTree: [],
			tag_ids: [],
			loading: false
		};
	},
	computed: {
		nowTags() {
			return this.$route.query.tags || [];
		},
		num() {
			return this.$route.query.type;
		},
		id() {
			return this.$route.query.id;
		}
	},
	created() {
		if (this.num === '1') {
			document.title = '添加标签';
		} else {
			document.title = '移除标签';
		}
		this.getLabelTree();
	},
	activated() {
		this.getLabelTree();
	},
	methods: {
		handleLabel(e) {
			var oDoms = document.getElementsByClassName('my-label');
			if (this.tag_ids.length < 20) {
				e.target.classList.toggle('active');
			} else {
				if (e.target.classList.contains('active')) {
					Toast.fail('最多选择20个标签');
				} else {
					e.target.classList.toggle('active');
				}
			}
			oDoms = [...oDoms].filter(ele => {
				return !ele.classList.contains('active');
			});
			this.tag_ids = [];
			oDoms.forEach(ele => {
				this.tag_ids.push({
					id: ele.getAttribute('data-id'),
					name: ele.innerText
				});
			});
		},
		getLabelTree() {
			this.labelTree = [];
			this.tag_ids = [];
			getTagTree({}).then(res => {
				if (this.num === '1') {
					this.labelTree = res.data;
					this.labelTree.forEach(item => {
						item.group.forEach(sitem => {
							this.nowTags.forEach(res => {
								if (sitem.name == res) {
									this.tag_ids.push({
										id: sitem.id,
										name: sitem.name
									});
								}
							});
						});
					});
					this.$nextTick(() => {
						var oDoms = document.getElementsByClassName('my-label');
						[...oDoms].forEach(ele => {
							this.tag_ids.forEach(item => {
								if (ele.getAttribute('data-id') == item.id) {
									ele.classList.remove('active');
								}
							});
						});
					});
				} else {
					this.labelTree = [];
					res.data.forEach(item => {
						item.group.forEach(sitem => {
							this.nowTags.forEach(res => {
								if (sitem.name == res) {
									this.labelTree.push(sitem);
								}
							});
						});
					});
				}
			});
		},
		handleEdit() {
			var id_arr = [];
			if (this.num === '1') {
				var arr = [];
				arr = this.tag_ids.filter(val => {
					return this.nowTags.indexOf(val.name) === -1;
				});
				arr.forEach(item => {
					id_arr.push(item.id);
				});
			} else {
				this.tag_ids.forEach(item => {
					id_arr.push(item.id);
				});
			}
			if (this.tag_ids.length != 0) {
				this.editLabel(id_arr);
			} else {
				Toast.fail('请选择标签');
			}
		},
		editLabel(id_arr) {
			this.loading = true;
			fetchTagging({
				id: [this.id],
				tag_ids: id_arr,
				type: this.num
			}).then(res => {
				this.loading = false;
				if (res.code == 200) {
					this.$router.replace('/detail');
					Toast.success(res.msg);
				} else {
					Toast.fail(res.msg);
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.label {
	width: 100vw;
	overflow: hidden;
	font-size: 14px;
	color: #333;
	margin-top: 10px;
	padding-bottom: 50px;

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;

		.van-icon {
			font-size: 16px;
			color: #6881ec;
		}

		.title-left {
			display: flex;
			align-items: center;
			color: #6881ec;

			> .bg {
				width: 3px;
				height: 15px;
				background-color: #6881ec;
				margin-right: 6px;
			}
		}
	}

	.tagList {
		/deep/.van-cell__title {
			width: 60px;
			flex: none;
			margin-right: 15px;
		}

		/deep/.van-cell__value {
			flex-grow: 1;
			text-align: left;
		}

		.van-tag {
			border: 1px solid transparent;
		}

		.active {
			background-color: #fff !important;
			color: #6881ec;
			border-color: #6881ec;
		}
	}

	.footer-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		z-index: 20;
	}
}
</style>
